.flex {
    width: 765px;
    height: 430px;
    }
* {
    /* 外边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
}
.speed {
    display: inline-block;  
    /* 强制转换为行内块元素 */
        background: #fff;
        flex: 1;
        /* 按比例继承父容器所有的可用宽度 */
        margin: 10px;
        border-radius: 50px;
        /* 设置子容器部分超出父容器，超出部分隐藏 */
        overflow: hidden;
}
body {
    height: 100vh;
    /* 当背景图片加载出来时放背景图片，加载不出来时放背景颜色 */
    background: #fff url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/133202947b3f4f01fb4e455d685e3a11.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160");
    background-size: cover;
    /* 调整背景图片的大小，变成跟整个容器一样大 */
    display: flex;
    /* 设置弹性布局后，可以控制子容器的位置，也就是wrapper */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
}
.wrapper {
    /* 设置一个弹性布局 */
   display: flex;
   width: 850px;
}
.speed-bar {
    width: 100%;
    height: 16.3%;
    /* 设置背景色为渐变色,从上往下 */
    background: linear-gradient(to bottom, #ff00c8, #ffea00);
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    color: white;
    /* 字体颜色 */
}
 